<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad {
            width: 200px;
            height: 200px;
            background-color: #666;
            position: fixed;
            right: 0;
            bottom: 0;
            /* visibility: hidden; */
            display: none;
        }

        span {
            float: right;
            width: 20px;
            height: 20px;
            color: #fff;
            background-color: #000;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="ad" id="ad">
        <span id="close">X</span>
        <p id="time">10s之后自动关闭</p>
    </div>


    <script>

        // 过了一段时间，弹出了一个小广告，小广告自带倒计时(10s之后会自己关闭) ， 也可以点X关闭


        var oAd = document.getElementById('ad');
        var oClose = document.getElementById('close');
        var oTime = document.getElementById('time');


        // 3s之后弹出
        setTimeout(function () {
            oAd.style.display = 'block';


            // 点X关闭
            oClose.onclick = function () {
                oAd.style.display = 'none';
                // 定时器本来在下面，   异步
                clearInterval(t);

            }


            // 10s倒计时完成之后自动关闭
            var count = 10;
            var t = setInterval(function () {
                count--;
                oTime.innerHTML = `${count}s之后自动关闭`;
                if (count === 0) {
                    oAd.style.display = 'none';
                    clearInterval(t)
                }
            }, 500)


        }, 1000)

    </script>

</body>

</html>